<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 基础样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
   <!-- 头部 -->
   <div class="head">
    <div class="head_top wrapper">
      <ul>
        <li>华为官网</li>|
        <li>荣耀官网</li>|
        <li>软件应用</li>|
        <li>花粉俱乐部</li>|
        <li>Select Region</li>
      </ul>

      <ul>
        <li class="special">登录</li>
        <li class="special">注册</li> |
        <li>我的订单 </li>|
        <li>V码(优购码)</li>|
        <li>手机版</li>|
        <li>网站导航</li>
      </ul>
    </div>
    <div class="head_logo wrapper">
      <div class="left">
        <a href="#">
          <img src="./images/logo.huawei.png" alt="">
        </a>
        <span>商城首页</span>
      </div>
      <div class="right">
        <img src="./images/qrcode_vmall_app01.png" alt="">
        <span>微信扫码关注我们</span>
      </div>
    </div>
  </div>
    <!-- 导航 -->
    <div class="navigation">
      <div class="wrapper">
        <ul>
          <li>华为专区</li>
          <li>HUAWEIP10</li>
          <li>HUAWEIMate9</li>
          <li>HUAWEINova</li>
          <li>华为畅享6s</li>
          <li>荣耀专区</li>
        </ul>
      </div>
    </div>
    <!-- 侧导航 -->
    <div class="swiper ">
      <div class="banner wrapper">
        <ul>
          <li>全部商品</li>
          <li><a href="#">手机</a></li>
          <li><a href="#" class="detail">HUAWEI Mate系列</a></li>
          <li><a href="#">平板&穿戴</a></li>
          <li><a href="#" class="detail">平板电脑 手环/手表</a></li>
          <li><a href="#">笔记本电脑</a></li>
          <li><a href="#">智能家居</a></li>
          <li><a href="#" class="detail">子母路由 电力猫 路由器</a></li>
          <li><a href="#">专属配件</a></li>
          <li><a href="#" class="detail">贴膜 保护壳 保护套</a></li>
          <li><a href="#">通用配件</a></li>
          <li><a href="#" class="detail">耳机 音箱</a></li>
        </ul>
        <div class="ban wrapper">
          <ol>
            <li class="current"><i>1</i></li>
            <li><i>2</i></li>
            <li><i>3</i></li>
            <li><i>4</i></li>
            <li><i>5</i></li>
            <li><i>6</i></li>
            <li><i>7</i></li>
          </ol>
        </div>
      </div>
      </div>

  <!-- 手机产品 -->
  <div class="recommend wrapper">
    <!-- 内容 -->
    <div class="bd">
      <ul>
        <li>
          <a href="#">
            <div class="pic"><img src="./images/20170310105644358.jpg" alt=""></div>

          </a>

        </li>

        <li>
          <a href="#">
            <div class="pic"><img src="./images/20170310090516264.jpg" alt=""></div>
          </a>

        </li>

        <li>
          <a href="#">
            <div class="pic"><img src="./images/2017031017165551.jpg" alt=""></div>

          </a>

        </li>

        <li>
          <a href="#">
            <div class="pic"><img src="./images/20170313143419135.jpg" alt=""></div>
            </div>

          </a>

        </li>

        
      </ul>

    </div>
    <!-- 第二层 -->
    <div class="goods wrapper">
      <ul>
        <li>
          <div>
            <h3>HUAWEI P10 Plus</h3>
            <span>金属砖雕工艺</span>
            <p>￥4388</p>
          </div>
          <img src="./images/1489161234073.png" alt="">
        </li>
        <li>
          <div>
            <h3>HUAWEI nova 青春版</h3>
            <span>炫出我色彩</span>
            <p>￥1999</p>
          </div>
          <img src="./images/1491476650727.png" alt="">
        </li>
        <li>
          <div>
            <h3>HUAWEI Mate 9 Pro</h3>
            <span>2k双曲面屏</span>
            <p>￥4699</p>
          </div>
          <img src="./images/1484219138436.png" alt="">
        </li>
      </ul>
    </div>

  <!-- 底部 -->
<div class="footer">
  <div class="wrapper">
      <!-- 服务 -->
  <div class="service">
    <div class="wrapper">
      <ul>
        <li><i></i><span>500强企业 品质保证</span></li>
        <li><i></i><span>7天退货 15天换货</span></li>
        <li><i></i><span>99元起免运费</span></li>
        <li><i></i><span>448家维修网点 全国联保</span></li>
      </ul>
    </div>
  </div>

   <!-- 底部介绍 -->
   <footer>
    <div class="footer-nav">
      <div class="nav-section">
        <h3>帮助中心</h3>
        <ul>
          <li><a href="#">购物指南</a></li>
          <li><a href="#">配送方式</a></li>
          <li><a href="#">支付方式</a></li>
          <li><a href="#">常见问题</a></li>
        </ul>
      </div>
      <div class="nav-section">
        <h3>售后服务</h3>
        <ul>
          <li><a href="#">保修政策</a></li>
          <li><a href="#">退换货政策</a></li>
          <li><a href="#">退换货流程</a></li>
          <li><a href="#">保修状态查询</a></li>
        </ul>
      </div>
      <div class="nav-section">
        <h3>技术支持</h3>
        <ul>
          <li><a href="#">售后网点</a></li>
          <li><a href="#">荣耀零售店铺</a></li>
          <li><a href="#">预约维修</a></li>
          <li><a href="#">手机寄修服务</a></li>
          <li><a href="#">维修配件价格查询</a></li>
          <li><a href="#">软件下载</a></li>
        </ul>
      </div>
      <div class="nav-section">
        <h3>关于商城</h3>
        <ul>
          <li><a href="#">公司介绍</a></li>
          <li><a href="#">华为商城简介</a></li>
          <li><a href="#">联系客服</a></li>
        </ul>
      </div>
      <div class="nav-section">
        <h3>关注我们</h3>
        <ul>
          <li><a href="#">新浪微博</a></li>
          <li><a href="#">腾讯微博</a></li>
          <li><a href="#">花粉俱乐部</a></li>
          <li><a href="#">商城手机版</a></li>
        </ul>
      </div>
    </div>
  </footer>

  <!-- 版权 -->
  <div class="copyright">
        <p>友情链接： | 华为官网 | 华为消费者业务 | 荣耀官网 | 花粉俱乐部 | 莫塞尔商城 | 爱旅官网 | 华为应用市场 | 万表网 | 中商情报网 | 刷机精灵 | 华为手机 | 优购物官网 | 智能电视 | UC浏览器 |<br>
         中关村商城 | 酷狗音乐 | 华为商城手机版 | 百信手机网 | 卡宝宝网 | 多特软件下载 | 同步助手 | 蜂鸟摄影网 | 奇珀论坛 | 家具商城 | 拍鞋网商城 | 欧宝丽珠宝 | 寻购网 | 亿智蘑菇 | 安卓市场 |<br>
         阿里巴巴生意经 | 手机大全 | 安卓软件园 | 卓大师刷机 | 智机论坛 | 电子产品世界 | 历趣网 | 网购返利 | Apple110 | 91手机门户网 | 移动叔叔 | 奥特莱斯 | 荣耀Magic | 携程租车 | <a href="#">申请链接 >></a></p>
        <p>隐私政策 服务协议 Copyright ? 2012-2017 VMALL.COM 版权所有 保留一切权利公安备案</p>
  
          <p> <img class="mg" src="./images/20160226162651249.png" alt="">苏公网安备 32011402010009号 | 苏ICP备09062682号-9 | 增值电信业务经营许可证：苏B2-20130048 | 网络文化经营许可证：苏网文[2015] 1599-026号
        </p>
       <p>
        <img class="mg1" src="./images/20160226162415360.png" alt=""> 
       <img class="mg1" src="./images/20160226162521265.png" alt=""> 
       <img class="mg1" src="./images/20160226162531395.png" alt=""> 
       <img  class="mg1" src="./images/20161224180914742.jpg" alt=""> 
       </p>
  </div>
  </div>
</div>

</div>

</body>
</html>